<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>个人作品</title>
		<!--/*背景和整体CSS*/-->
		<style>
			body {
				margin: 0;
				padding: 0;
			}
			
			html {
				background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-attachment: fixed;
			}
		</style>
		<script src="../js/js.js" type="text/javascript"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<!--/*主体部分CSS*/-->
		<link rel="stylesheet" href="css/porsonal space.css" />
		<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
		<!--/*目录和LOGO部分*/-->
		<link rel="stylesheet" href="../css/header.css" type="text/css">

		<!--/*页脚部分css	*/-->
		<link rel="stylesheet" href="../css/footer.css" type="text/css">

	</head>

	<body onload="loding()">
		<!--导航栏与logo部分-->
		<header>
			<div class="navbar-container">
				<!-- 左边图标和logo -->
				<div class="navbar-left">
					<a href="../index.html"><img src="../images/logo.png" class="img1"></a>
					<h1 class="h1">个人作品</h1><br />
					<span class="h2">Personal Space</span>
				</div>
				<div class="navbar-morebox">
					<button class="more-btn">
						<img src="../images/more.png" alt="">
					</button>
				</div>
				<!-- 导航菜单-->
				<ul class="navbar-list">
					<li class="navbar-item"><a href="/">首页</a></li>
					<li class="navbar-item"><a href="/Experiment" target="_blank">Experiment</a></li>
					<li class="navbar-item"><a href="/musicdomo" target="_blank">小domo</a></li>
					<li class="navbar-item"><a href="/personal" target="_blank">个人作品</a></li>
					<li class="navbar-item"><a href="/about" target="_blank">关于我</a></li>
				</ul>
				<!-- 搜索框 -->
				<!-- 搜索框 -->
				<div class="navbar-search">
					<form action="http://www.baidu.com/s" method="get">
						<input type="text" class="search" placeholder="百度一下，你就知道" name="w">
						<button class="search-btn">
							<img src="../images/search.png">
						</button>
					</form>
				</div>
				<!-- 更多按钮 -->
				<!--小屏幕显示 -->

			</div>
			<!-- 手机或平板屏幕显示 -->
			<ul class="small-list" id="small-list">
				<li class="small-item">
					<a href="../index.html">首页</a>
				</li>
				<li class="small-item">
					<a href="other pages/Experiment.html">Experiment</a>
				</li>
				<li class="small-item">
					<a href="other pages/domo.html">小domo</a>
				</li>
				<li class="small-item">
					<a href="other pages/personal space.html">个人作品</a>
				</li>
				<li class="small-item">
					<a href="other pages/about me.html">关于我</a>
				</li>
				<li class="small-item">
					<form action="http://www.baidu.com/s" method="get">
						<input type="text" class="search" placeholder="百度一下，你就知道" name="w">
						<button class="search-btn">
							<img src="../images/search.png">
						</button>
					</form>
				</li>
			</ul>
		</header>

		<!--主体部分-->
		<main>
			<div style="margin: 0 auto; width: 80%;">
				<div class="main-left">
					<div style="text-align: center;width: 100%;background-color: #178CFF;margin: 30px 0 0 0 ;font-size: 30px;font-weight: bold;text-align: center;">
						<div>个人作品</div>
					</div>
					<div style="margin: 0 auto;">
						<div class="pics">
							<ul>
								<li><i><a href="http://112.124.46.34:3000/posts" target="_blank"><img src="web img/1.png"></a></i><span>express多人论坛</span></li>
								<li><i><a href="http://112.124.46.34:3001" target="_blank"><img src="web img/2.png"></a></i><span>陈嗯嗯个人博客</span></li>
								<li><i><a href="http://112.124.46.34:3002/login.php" target="_blank"><img src="web img/3.png"></a></i><span>仿微博（明日微博）</span></li>
								<li><i><a href="http://112.124.46.34:3003" target="_blank"><img src="web img/4.png"></a></i><span>全景漫游</span></li>
								<li><i><a href="http://112.124.46.34:3005" target="_blank"><img src="web img/5.png"></a></i><span>node留言板</span></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="main-right">
					<div style="width: 100%;font-size: 30px;font-weight: bold;background-color: #178CFF;margin: 30px 0 0 0;text-align: center;">关于我</div>
					<div style="margin: 10px 30px 10px 30px;">

						<div style="text-align: center;">
							<img src="../images/ME.jpg" style="width: 150px;border-radius: 20px;" />
							<div style="text-align: left;font-size: 15px;color: royalblue;">
								姓名：陈天华</i>
								<br /> 昵称：陈嗯嗯
								<br /> 职业：web前端开发
								<br /> 现居：汕头&广州
								<br /> 主页：http://www.cth1688.cn
								<br /> 学龄：<span id="time"></span>天
								<br />
							</div>
						</div>

					</div>
					<div class="icon">
						<ul>
							<a href="#" id="contact_weixin" onclick="openWindow(this)">
								<li><i class="fa fa-weixin fa-2x" aria-hidden="true"></i></li>
							</a>
							<a href="#" id="contact_qq" onclick="openWindow(this)">
								<li><i class="fa fa-qq fa-2x" aria-hidden="true"></i></li>
							</a>
							<a href="mailto:www.845758376chen@qq.com">
								<li><i class="fa fa-envelope-square fa-2x" aria-hidden="true"></i></li>
							</a>
							<a href="https://github.com/845758376">
								<li><i class="fa fa-github-square fa-2x" aria-hidden="true"></i></li>
							</a>
						</ul>
					</div>
					<!-- <div class="dragula_parent"> -->
					<div class="weather">
						<div class="weather-layout">
							<div id="div1">
								<img src="../images/logo.png" style="width:100%;" />
							</div>
							<div id="div2" style="display:none;">
								<div class="dragula_wrapper">
									<div id="left1" class="dragula_container">
										<div>
											<!-- <div style="background:red; height:50px; width:50px"> -->
											<iframe style="border:2px #1E90FF dashed" src="http://www.thinkpage.cn/weather/weather.aspx?c=CHXX0008&l=zh-CN&p=MSN&a=1&u=C&s=1&m=0&x=1&d=3&fc=&bgc=&bc="
											 frameborder="0" scrolling="no" width="200" height="260" allowtransparency="true"></iframe>
										</div>
									</div>
									<div id="right1" class="dragula_container">
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- </div> -->
					<div class="top_contact_us">
						<div class="top_telphone"></div>
					</div>
					<div id="light_qq" class="white_content">
						<img src="../images/qq.jpg" width="300px" />
					</div>
					<div id="light_weixin" class="white_content">
						<img src="../images/weixin.jpg" width="300px" />
					</div>
					<div id="fade" class="black_overlay" onClick="closeWindow()">
					</div>
					<!--日历-->
					<div style="width: 100%;font-size: 30px;font-weight: bold;background-color: #178CFF;margin: 30px 0 0 0;text-align: center;">日历</div>
					<div class="calendar">
						<div class="title">
							<h1 class="green" id="calendar-title">Month</h1>
							<h2 class="green small" id="calendar-year">Year</h2>
							<a href="" id="prev">Prev Month</a>
							<a href="" id="next">Next Month</a>
						</div>
						<div class="body">
							<div class="lightgrey body-list" style="position: relative;left: -45px;">
								<ul>
									<li>MON</li>
									<li>TUE</li>
									<li>WED</li>
									<li>THU</li>
									<li>FRI</li>
									<li>SAT</li>
									<li>SUN</li>
								</ul>
							</div>
							<div class="darkgrey body-list" style="position: relative;left: -45px;">
								<ul id="days">
								</ul>
							</div>
						</div>
					</div>
				</div>

			</div>
		</main>

		<!--页脚部分-->
		<footer>
			<div class="footer">
				<a href="../index.html">Home</a> |
				<a href="#">Terms of Use</a> |
				<a href="#">FAQs</a> |
				<a href="#">About Us</a> |
				<a href="#">Contact Us</a><br /> Copyright © 2019
				<a href="#"> cth1688 </a> | Designed by
				<a href="../index.html" target="_blank">www.cth1688.cn</a>
			</div>
		</footer>

		<!--天气-->
		<script type="text/javascript">
			dragula([left1, right1]);

			function loding() {
				var input = document.getElementById("div1");
				input.style.display = "none";
				var input1 = document.getElementById("div2");
				input1.style.display = "inline";
			}
		</script>
		<!--弹窗-->
		<script>
			function openWindow(obj) {
				var qq_or_weixin = "light_qq";
				switch (obj.id) {
					case 'contact_weixin':
						qq_or_weixin = "light_weixin";
						break;

					case 'contact_qq':
						qq_or_weixin = "light_qq";
						break;
				}
				document.getElementById(qq_or_weixin).style.display = 'block';
				document.getElementById('fade').style.display = 'block';
			}

			function closeWindow() {
				document.getElementById('light_weixin').style.display = 'none';
				document.getElementById('light_qq').style.display = 'none';
				document.getElementById('fade').style.display = 'none';
			}
		</script>
		<!--日历-->
		<script>
			var month_olympic = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
			var month_normal = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
			var month_name = ["January", "Febrary", "March", "April", "May", "June", "July", "Auguest", "September", "October",
				"November", "December"
			];
			var holder = document.getElementById("days");
			var prev = document.getElementById("prev");
			var next = document.getElementById("next");
			var ctitle = document.getElementById("calendar-title");
			var cyear = document.getElementById("calendar-year");
			var my_date = new Date();
			var my_year = my_date.getFullYear();
			var my_month = my_date.getMonth();
			var my_day = my_date.getDate();
			prev.onclick = function(e) {
				e.preventDefault();
				my_month--;
				if (my_month < 0) {
					my_year--;
					my_month = 11;
				}
				refreshDate();
			}
			next.onclick = function(e) {
				e.preventDefault();
				my_month++;
				if (my_month > 11) {
					my_year++;
					my_month = 0;
				}
				refreshDate();
			}

			function refreshDate() {
				var str = "";
				var totalDay = daysMonth(my_month, my_year); //获取该月总天数
				var firstDay = dayStart(my_month, my_year); //获取该月第一天是星期几
				var myclass;
				for (var i = 0; i < firstDay; i++) {
					str += "<li></li>"; //为起始日之前的日期创建空白节点
				}
				for (var i = 1; i <= totalDay; i++) {
					if ((i < my_day && my_year == my_date.getFullYear() && my_month == my_date.getMonth()) || my_year < my_date.getFullYear() ||
						(my_year == my_date.getFullYear() && my_month < my_date.getMonth())) {
						myclass = " class='lightgrey'"; //当该日期在今天之前时，以浅灰色字体显示
					} else if (i == my_day && my_year == my_date.getFullYear() && my_month == my_date.getMonth()) {
						myclass = " class='green greenbox'"; //当该日期是当天时，以绿色背景突出显示
					} else {
						myclass = " class='darkgrey'"; //当该日期在今后之后时，以深灰字体显示
					}
					str += "<li" + myclass + ">" + i + "</li>"; //创建日期节点
				}
				holder.innerHTML = str; //设置日期显示
				ctitle.innerHTML = month_name[my_month]; //设置英文月份显示
				cyear.innerHTML = my_year; //设置年份显示
			}
			//获取某年某月第一天是星期几
			function dayStart(month, year) {
				var tmpDate = new Date(year, month, 1);
				return (tmpDate.getDay());
			}

			//计算某年是不是闰年，通过求年份除以4的余数即可
			function daysMonth(month, year) {
				var tmp = year % 4;
				if (tmp == 0) {
					return (month_olympic[month]);
				} else {
					return (month_normal[month]);
				}
			}
			refreshDate();



			// 学龄计算
			var timestamp = (new Date()).getTime();

			function timestampToTime(timestamp) {
				var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() + ' ';
				return Y + M + D;
			}

			var allday = 279 * 86400 * 1000 //前面是天数	如:365天	
			// var lasttime = Date.parse(sofeday);
			var nowdate = new Date('2020-2-25'.replace(/-/, "/")) //这是你设置时的日期.今天设置的就填今天日期.
			var oldtime = nowdate - allday
			console.log(timestampToTime(oldtime))
			jutioldtime = timestampToTime(oldtime)
			var lasttime = Date.parse(jutioldtime);
			//alert(lasttime)
			total = parseInt((timestamp - lasttime) / (1000 * 60 * 60 * 24));
			console.log(total);
			console.log("从最开始到现在一共有" + total + "天");
			$('#time').text(total)
		</script>
	</body>

</html>
